<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="box1">1111</div>
        <div class="box2">2222</div>
        <div class="box3">3333</div>
    </div>
    <script>
        // 元素操作：增删改查 
        // 新增相关
        // 1.创建一个jq元素； $(标签)
        // document.createElement

        // document.createElement('<div></div>');
        // $("div")
        // let ele =   $("<div></div>",{
        //     class:"box",
        //     style:"width:100px;height:100px;background:red"
        // }).html("我是jq创建的标签");
        // $(".container").append(ele);

        // 2.可以添加到执行的容器 父元素.append(元素);
        // $(document).click(function(){
        //     $(".container").append($("<span></span>").html("我是span"));
        // })

        // 2.可以把元素添加到父元素里  子元素.appendTo(父元素);
        // $(document).click(function(){
        //     $("<span></span>").html("我是span").appendTo($(".container"))
        // })
        // 3.添加再某个元素之后 元素.after("元素");
        $(document).click(function(){
            // $(".box2").after($("<span></span>").html("我是span"));
            $("<span></span>").html("我是span").insertAfter($(".box2"));

        })
        // 4.添加到某个元素之前 元素.before(“元素”);
        // $(document).click(function(){
        //     // $(".box2").before();
        //     $("<span></span>").html("我是span").insertBefore($(".box2"));
        // })





    </script>
</body>
</html>